<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">左侧树</h1>
</div>
<div class="wrapper-md">
    <div class="row">
        <uib-tabset active="activeForm">
            <uib-tab index="0" heading="简单树">
                <ng-form name="nestedForm">
                    <div class="form-group">
                        <!-- 左侧树形结构树形结构-->
                        <div class="col-sm-3 m-b-sm">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <span style="display: inline-block; height: 24px;" class="font-bold"
                                          translate="树名"></span>
                                </div>
                                <!-------------------------简单树start------------------------------------->
                                <div class="panel panel-body"  style="overflow: auto; max-height: 500px;">
                                    <ul iss-ztree="vm.treeSetting" id="demoTree" tree-control="vm.treeObj"
                                        tree-data="vm.treeData" class="ztree"></ul>
                                </div>
                                <!-------------------------简单树end------------------------------------->
                            </div>
                        </div>
                        <div class="col-sm-9 m-b-sm">
                            <!-- 树节点内容展示-->
                            <div class="panel panel-default">
                                <!--面板标题-->
                                <div class="panel-heading font-bold" translate="节点内容"></div>
                                <div class="panel-neck row">
                                    <form class="form-inline col-md-12" role="form">
                                        <!--------------------------新增节点start------------------------------>
                                        <div class="form-group">
                                            <button class="btn btn-sm btn-primary" ng-click="vm.addOrUpdateNode()">
                                                <i class="fa fa-plus"></i> {{'新增节点'|translate}}
                                            </button>
                                        </div>
                                    </form>
                                </div>
                                <div class="wrapper-md">
                                    <div class="alert alert-info ng-binding">{{vm.treeNode.name}}</div>
                                    <div class="alert alert-info ng-binding">创建一个简单的树需要复制的文件有：
                                        <li>tree-list-ctrl.js</li> <ul>注意拷贝输的设置时，拷贝设置中相应的方法</ul>
                                        <li>tree-service.js</li>
                                        <li>tree-list.html</li>
                                        <li>tree-edit-ctrl.js</li>
                                        <li>add-node.html</li>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </ng-form>
            </uib-tab>
            <uib-tab index="1" heading="复选树">
                <ng-form name="nestedForm">
                    <div class="form-group">
                        <!-- 左侧树形结构树形结构-->
                        <div class="col-sm-3 m-b-sm">
                            <div class="panel panel-default" style="overflow: auto; max-height: 500px;">
                                <div class="panel-heading">
                                    <span style="display: inline-block; height: 24px;" class="font-bold"
                                          translate="树名"></span>
                                </div>
                                <div class="panel panel-body">
                                    <!-------------------------复选树end------------------------------------->
                                    <ul iss-ztree="vm.treeCheckboxSetting" id="demoCheckTree"
                                        tree-control="vm.treeCheckboxObj"
                                        tree-data="vm.treeCheckboxData" class="ztree"></ul>
                                    <!-------------------------复选树end------------------------------------->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9 m-b-sm">
                            <!-- 树节点内容展示-->
                            <div class="panel panel-default">
                                <!--面板标题-->
                                <div class="panel-heading font-bold" translate="节点内容"></div>
                                <div class="wrapper-md">
                                    <div class="alert alert-info ng-binding">点击的树节点：{{vm.checkboxTreeNode.name}}</div>
                                    <div class="alert alert-info ng-binding">选中的节点：
                                        <ul ng-repeat="treeNode in vm.treeCheckedNodes">
                                            <ul>{{treeNode.name}}</ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ng-form>
            </uib-tab>
            <uib-tab index="2" heading="单选树">
                <ng-form name="nestedForm">
                    <div class="form-group">
                        <!-- 左侧树形结构树形结构-->
                        <div class="col-sm-3 m-b-sm">
                            <div class="panel panel-default" style="overflow: auto; max-height: 500px;">
                                <div class="panel-heading">
                                    <span style="display: inline-block; height: 24px;" class="font-bold"
                                          translate="树名"></span>
                                </div>
                                <div class="panel panel-body">
                                    <!-------------------------单选树start------------------------------------->
                                    <ul iss-ztree="vm.treeRadioSetting" id="demoRadioTree"
                                        tree-control="vm.treeRadioObj"
                                        tree-data="vm.treeRadioData" class="ztree"></ul>
                                    <!-------------------------单选树end------------------------------------->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9 m-b-sm">
                            <!-- 树节点内容展示-->
                            <div class="panel panel-default">
                                <!--面板标题-->
                                <div class="panel-heading font-bold" translate="节点内容"></div>
                                <div class="wrapper-md">
                                    <div class="alert alert-info ng-binding">点击的树节点：{{vm.radioTreeNode.name}}</div>
                                    <div class="alert alert-info ng-binding">选中的节点：
                                        <ul ng-repeat="treeNode in vm.radioTreeCheckedNodes">
                                            <ul>{{treeNode.name}}</ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ng-form>
            </uib-tab>
            <uib-tab index="3" heading="下拉树">
                <ng-form name="nestedForm">
                    <div class="form-group">
                        <!-- 左侧树形结构树形结构-->
                        <div class="col-sm-3 m-b-sm">
                            <div class="panel panel-default">
                                <div class="panel-heading font-bold" translate="输入框"></div>
                                <div class="wrapper-md">
                                    <!-------------------------下拉树start------------------------------------->
                                    <span uib-dropdown on-toggle="toggled(open)" auto-close="outsideClick">
                                        <input id="simple-dropdown" uib-dropdown-toggle ng-model="vm.selectDownNode"
                                               readonly>
                                        </input>
                                        <ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown"  style="overflow: auto; max-height: 300px;">
                                            <ul iss-ztree="vm.treeDownSetting" id="demoDownTree"
                                                tree-control="vm.treeDownObj"
                                                tree-data="vm.treeDownData" class="ztree"></ul>
                                        </ul>
                                    </span>
                                    <!-------------------------下拉树start------------------------------------->
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-9 m-b-sm">
                            <!-- 树节点内容展示-->
                            <div class="panel panel-default">
                                <!--面板标题-->
                                <div class="panel-heading font-bold" translate="节点内容"></div>
                                <div class="wrapper-md">
                                    <div class="alert alert-info ng-binding">点击的树节点：{{vm.downTreeNode.name}}</div>
                                    <div class="alert alert-info ng-binding">选中的节点：
                                        <ul ng-repeat="treeNode in vm.downTreeCheckedNodes">
                                            <ul>{{treeNode.name}}</ul>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <ng-form>
            </uib-tab>
            <uib-tab index="4" heading="API文档">
                <div class="panel panel-default">
                    <!--面板标题-->
                    <div class="panel-heading font-bold" translate="文档内容"></div>
                    <div class="wrapper-md">
                        <a href="http://www.treejs.cn/v3/demo.php#_101" target="_blank"  class="alert alert-info ng-binding">Demo展示</a>
                        <a href="http://www.treejs.cn/v3/api.php" target="_blank" class="alert alert-info ng-binding">API展示</a>
                    </div>
                </div>
            </uib-tab>
        </uib-tabset>

    </div>
</div>
</div>

